<template>
  <!--  -->
  <section class="cart-section pt-100 pb-70">
    <div class="container">
      <div
        class="product-info-header product-info-header-three product-info-header-borderless"
      >
        <h2>Wishlist</h2>
        <a
          href="javascript:;"
          class="btn main-btn main-btn-secondary m-0"
          @click="() => $jumpLink('/shop')"
          alt="shop"
        >
          Back To Shop
        </a>
      </div>
      <div class="cart-table">
        <table>
          <thead>
            <tr>
              <th>Product Thumb</th>
              <th>Product Name</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Add Cart</th>
              <th>Remove</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in wishlist" :key="index">
              <tr>
                <td>
                  <div class="product-table-thumb">
                    <img
                      :src="require('assets/images/products/product-14.png')"
                      alt="product"
                    />
                  </div>
                </td>
                <td>{{ item.title }}</td>
                <td class="color-secondary">
                  {{ item.currentPrice }}/<del>{{ item.originalPrice }}</del>
                </td>
                <td>
                  <div class="cart-quantity">
                    <button
                      class="qu-btn dec"
                      @click="
                        item.quantity <= 1
                          ? (item.quantity = 1)
                          : (item.quantity -= 1)
                      "
                    >
                      -
                    </button>
                    <input
                      type="text"
                      class="qu-input"
                      :value="item.quantity"
                      @change="changeQuantity($event, item)"
                    />
                    <button class="qu-btn inc" @click="item.quantity += 1">
                      +
                    </button>
                  </div>
                </td>
                <td>
                  <a
                    href="javascript:;"
                    class="btn main-btn main-btn-secondary"
                    @click="addToCart(item)"
                  >
                    Add To Cart
                  </a>
                </td>
                <td class="cancel">
                  <a href="javascript:;" @click="deleteProduct(item.id)">
                    <i class="flaticon-delete"></i>
                  </a>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="row justify-content-between mt-30">
        <div class="col-sm-6 col-md-7 col-lg-6 pb-30">
          <div class="section-button-group">
            <a class="btn main-btn main-btn-secondary" @click="updateList">
              Update List
            </a>
            <a
              href="javascript:;"
              class="btn main-btn main-btn-secondary coupon-btn"
              @click="() => $jumpLink('/shop/shop-cart')"
            >
              View Cart
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
  computed,
  inject,
} from "vue";

const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  wishlist: computed(() => shopStore.wishlist),
});
const { wishlist } = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

// 自定义方法
const reload = inject("reload");

const updateList = () => {
  data.wishlist = computed(() => shopStore.wishlist);
};

const addToCart = (product) => {
  shopStore.addCart(product);
};

const changeQuantity = (event, item) => {
  item.quantity = parseInt(event.target.value);
};

const deleteProduct = (id) => {
  // shopStore.$state.wishlist = data.wishlist.filter((item) => item.id != id);
  shopStore.$state.wishlist.splice(
    shopStore.$state.wishlist.findIndex((item) => item.id === id),
    1
  );
};
</script>

<script></script>

<style lang="scss" scoped></style>
